<template>
	<!-- <cl-crud>
		<el-tabs v-model="activeTab">
			<el-tab-pane
				v-for="tab in tabs"
				class="tab-pane"
				:key="tab.value"
				:label="tab.label"
				:name="tab.value"
				lazy
			>
				<transition name="fade-transform" mode="out-in">
					<keep-alive>
						<component :is="tab.value" v-if="activeTab == tab.value" />
					</keep-alive>
				</transition>
			</el-tab-pane>
		</el-tabs>
	</cl-crud> -->
	<div class="crud-container flex-column plr-1 pt-1">
		<cl-tabs-card v-model="activeTab" :tabs="tabs" />
		<cl-flex1 style="overflow: hidden">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<template v-for="tab in tabs">
						<component
							:key="tab.name"
							:is="tab.name"
							v-if="activeTab == tab.name && tab.auth"
						/>
					</template>
				</keep-alive>
			</transition>
		</cl-flex1>
	</div>
</template>

<script>
import Qrcode from "./components/qrcode";
import List from "./components/list";
import Report from "./components/report";
const tabs = [
	{ label: "我的收款码", name: "qrcode", auth: "store_miniqrcode" },
	{ label: "收款列表", name: "list", auth: "store_minipaylist" },
	{ label: "收款报表", name: "report", auth: "store_minipayreport" }
];
export default {
	name: "CusMineEarnestCollect",
	components: {
		Qrcode,
		List,
		Report
	},
	data() {
		return {
			activeTab: ""
		};
	},
	computed: {
		tabs() {
			return tabs.filter(e => this.$auth(e.auth));
		}
	},
	mounted() {
		let tab = this.tabs[0];
		this.activeTab = tab?.name ?? "";
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.demo).done();
			app.refresh();
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1 });
		}
	}
};
</script>

<style lang="scss" scoped>
.crud-container {
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
}
</style>
